<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Css clip & mask</title>
		<style type="text/css">
			img.mask {
				-webkit-mask: url('hexagon.png') no-repeat;
				-webkit-animation: round 3s infinite linear;
			}
			@-webkit-keyframes round {
				to {
					transform: rotateZ(360deg);
				}
			}

			.clip-svg,
			#svgPath {
				-webkit-clip-path: url(#hex-mask);
				-webkit-animation: round 3s infinite linear;
			}
			.svg-clipped {
                -webkit-clip-path: url(#svgPath);
                clip-path: url(#svgPath);
            }

            .circle {
            	fill: #f00;
            	background: url(longCat.jpg) no-repeat;
            }
		</style>
	</head>
	<body>
		<img src="longCat.jpg" class="svg-clipped" alt="">
		<img class="mask" src="longCat.jpg" alt="">

		<svg height="0" width="0">
			<defs>
			<clipPath id="hex-mask">
				<circle cx="100" cy="100" r="60"/>
			</clipPath>
			</defs>
		</svg>
		<svg height="0" width="0">
            <defs>
                <clipPath id="svgPath">
                    <path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="M215,100.3c97.8-32.6,90.5-71.9,336-77.6
        c92.4-2.1,98.1,81.6,121.8,116.4c101.7,149.9,53.5,155.9,14.7,178c-96.4,54.9,5.4,269-257,115.1c-57-33.5-203,46.3-263.7,20.1
        c-33.5-14.5-132.5-45.5-95-111.1C125.9,246.6,98.6,139.1,215,100.3z"/>
                </clipPath>
            </defs>
        </svg>
		<img src="longCat.jpg" class="clip-svg" alt="">


		<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">

			<circle class="circle" cx="100" cy="100" r="60">
				<a href="">
					<image xlink:href="longCat.jpg" class="svg-clipped" alt="">
				</a>
			</circle>
		</svg>
	</body>
</html>